import React,{Suspense} from 'react'
import {BrowserRouter,Route,Routes,Navigate} from 'react-router-dom'
import routes from './router/router_config'
import {RouterItem,RouterList} from './types/index'

type Props = {}

function App({}: Props) {
  const rout=(arr:RouterList)=>{
    const newArr=arr.map((v:RouterItem,i:number)=>{
      return <Route
      key={i}
      path={v.path}
      element={v.to?<Navigate to={v.to}></Navigate>:<v.element></v.element>}
      >
        {v.children && rout(v.children)}
      </Route>
    })
    return newArr
  }
  return (
    <Suspense>
        <BrowserRouter>
          <Routes>
            {rout(routes)}
          </Routes>
        </BrowserRouter>
    </Suspense>
  )
}

export default App